<template>
    <div class="c-container">
        <div class="c-title">用户列表</div>
        <div class="c-body">
            <div class="list-con">
                <div class="list-item">
                    <div class="small">id</div>
                    <div>用户名</div>
                    <div>游戏名</div>
                    <div class="small">难度</div>
                    <div>规格</div>
                    <div>炸弹数</div>
                    <div>分数</div>
                    <div>时长</div>
                    <div>上传时间</div>
                    <div class="small">状态</div>
                    <!-- <div>操作</div> -->
                </div>
                <div class="list-item" v-for="(item,index) in data" :key="index">
                    <div class="small">{{item.scoreId}}</div>
                    <div>{{item.username}}</div>
                    <div>{{item.gname}}</div>
                    <div class="small">{{item.alias}}</div>
                    <div>{{item.specification}}</div>
                    <div>{{item.amount}}</div>
                    <div>{{item.score}}</div>
                    <div>{{item.duration}}</div>
                    <div>{{item.endTime}}</div>
                    <div class="small">{{item.status}}</div>
                    <!-- <div>
                        <button v-on:click="delUser(index)">删除</button>
                        <button v-on:click="editProfile(index)">编辑</button>
                    </div> -->
                </div>

            </div>
            <div class="list-page">
                page
            </div>

        </div>
        <div class="c-popup" v-if="visible_edit">
            <!-- <EditProfile :data="data" :defaultIndex="defaultIndex" :hideEditFn="hideEditFn" /> -->
        </div>
    </div>
</template>
<script>
import Axios from "axios";
import EditProfile from "./EditProfile";
export default {
    name: "score",
    components: {
        EditProfile
    },
    data() {
        return {
            visible_edit: false,
            defaultIndex: 1,
            data: [{}],
            face: 1
        };
    },
    created() {
        this.init();
    },
    computed: {},
    methods: {
        init() {
            Axios({
                url: "/apis/scoreList",
                method: "post"
            }).then(response => {
                let { code, data, msg } = response.data;
                if (code == 0) {
                    this.data = data;
                }
            });
        },
        cpSex(value) {
            let str = "保密";
            switch (Number(value)) {
                case 0:
                    str = "男";
                    break;
                case 1:
                    str = "女";
                    break;
                case 2:
                    str = "保密";
                    break;
            }
            return str;
        },
        comUserFace(face) {
            return "./../static/userFace/" + (face ? face : 1) + ".png";
        },
        delUser(index) {
            console.log(index);
        },
        visibleEditFn() {
            this.visible_edit = true;
        },
        hideEditFn() {
            this.visible_edit = false;
        },
        editProfile(index) {
            this.defaultIndex = index;
            this.visibleEditFn();
        }
    }
};
</script>
<style lang='scss'>
.c-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .c-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
  }
  .c-body {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    .list-con {
      flex: 1;
      border: 1px solid #ddd;
      overflow-y: auto;
      .list-item {
        height: 40px;
        display: flex;
        flex-direction: row;
        background: #fefefe;
        > div {
          flex: 1;
          line-height: 40px;
          min-width: 80px;
          padding-left: 10px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          &:nth-child(2n) {
            background: #f6f6f6;
          }
          > img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
          }
        }
        .small {
          flex: none;
          text-align: center;
        }
        &:first-child {
          > div {
            text-align: center;
          }
        }
        &:nth-child(2n) {
          background: #f6f6f6;
          > div {
            &:nth-child(2n) {
              background: #fefefe;
            }
          }
        }
      }
    }
    .list-page {
      height: 40px;
    }
  }
  .c-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    .editProfile-popup {
      width: 400px;
      height: auto;
      padding: 10px;
      background: #00bcd4;
      .editProfile-title {
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 30px;
      }
      .form-item {
        height: 26px;
        padding: 5px 0;
        display: flex;
        > label {
          width: 80px;
          height: inherit;
          display: flex;
          align-items: center;
        }
        > div {
          flex: 1;
          height: inherit;
          > input[type='text'] {
            flex: 1;
            height: inherit;
          }
        }
      }
      .form-btn {
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>
